<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>联动菜单</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../html-js/tool.js"></script>
    <script type="text/javascript">

        function extracted1() {
            $.ajax({
                "url": "http://localhost:8080/jdbc/channel",
                "data": {"level": "1"},
                "type": "get",
                "dataType": "json",
                "success": function (json) {
                    Ulog.i(json);
                    for (var i = 0; i < json.length; i++) {
                        var ch = json[i];
                        $("#lv1").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
                    }
                }
            })
        }

        function extracted2() {
            $("#lv1").on("change", function () {
                var parent = $(this).val();
                Ulog.i(parent);
                $.ajax({
                    "url": "http://localhost:8080/jdbc/channel",
                    "data": {"level": "2", "parent": parent},
                    "dataType": "json",
                    "type": "get",
                    "success": function (json) {
                        Ulog.i(json);
                        //移除所有lv2下的原始option选项
                        $("#lv2>option").remove();
                        for (var i = 0; i < json.length; i++) {
                            var ch = json[i];
                            $("#lv2").append("<option value='" + ch.code + "'>" + ch.name + "</option>")
                        }
                    }
                })
            })
        }

        $(function () {
            extracted1();
            extracted2();

        })

    </script>
</head>
<body>
<select id="lv1" style="width:200px;height:30px">
    <option selected="selected">请选择</option>
</select>
<select id="lv2" style="width:200px;height:30px"></select>
</body>
</html>